<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>帮助教程</title>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">
    <%@include file="../include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/ui/help/helpList.css">
</head>
<body>
<!--头部-->
<%@include file="../include/header.jsp" %>

<div class="index-outside">
    <aside>
        <div class="aside-scroll">
            <i class="aside-bg"></i>
            <div class="aside-main">
                <div class="help-hd">帮助教程</div>
                <c:forEach var="help" items="${helpList}">
                    <div class="aside-first">
                        <div class="aside-dt"><a href="javascript:changeCtn('${help.id}')" data-h-id="${help.id}"
                                                 title="${help.title}"><span
                                class="sort"><fmt:formatNumber value="${help.serialNumber}" pattern="#.#"/>、</span><span
                                class="tt ellipsis-1">${help.title}</span></a></div>
                        <ul class="aside-dd">
                            <c:forEach var="cHelp" items="${help.childrens}">
                                <li class="aside-second">
                                    <a href="javascript:changeCtn('${cHelp.id}')" title="${cHelp.title}"
                                       data-h-id="${cHelp.id}"
                                       class="aside-nav " title="${cHelp.title}">
                                        <span class="sort"><fmt:formatNumber value="${cHelp.serialNumber}"
                                                                             pattern="#.#"/>、</span><span
                                            class="tt ellipsis-1">${cHelp.title}</span>
                                    </a>
                                </li>
                            </c:forEach>
                        </ul>
                    </div>
                </c:forEach>
            </div>
        </div>
    </aside>
    <!--内容-->
    <section>
        <div class="section-main">
            <div class="act-detail-head mt20">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        <li class="layui-this"><span class="title f18 ml5 mr5">后台图文教程</span></li>
                        <li><span class="title f18 ml5 mr5">手机端预览效果</span></li>
                    </ul>
                    <div class="layui-tab-content" id="img_text_outer">
                        <div class="layui-tab-item layui-show">
                            <div id="content">
                                <div class="act-main-body img-text-content">

                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div id="applyRelated">
                                <div class="act-main-body img-text-content">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--底部-->
        <%@include file="../include/footer.jsp" %>
    </section>
</div>

<script type="text/javascript" src="${ctx}/script/common/list.js"></script>
<script type="text/javascript" src="${ctx}/script/common/img_text.js"></script>
<script type="text/javascript">
    $(function () {
        layui.use(['element'], function () {
        });
        changeCtn('${id}'||$('.aside-main a').first().data('hId'))
    })

    function changeCtn(id) {
        $('.aside-main a.active').removeClass('active')
        $('a[data-h-id="' + id + '"]').addClass('active')
        txz.ajaxRequest({
            url: "${ctx}/help/help/loadContent.do?id=" + id,
            type: 'get',
            callBack: function (res) {
                if (res.success) {
                    $('.section-main .c-def-header').remove()
                    txz.initHeader({
                        nav: [{
                            name: '帮助教程',
                            curr: false
                        }, {
                            name: res.data.title,
                            curr: true
                        }
                        ]
                    });
                    $("#help_title").html(res.data.title);
                    $("#content .img-text-content").html(res.data.content);
                    $("#applyRelated .img-text-content").html(res.data.frontContent);
                    imgText.initImgNew("#img_text_outer");
                    setTimeout(function () {
                        $('.lazy-img').picLazyLoad({
                            parent: $('#img_text_outer')
                        });
                    }, 100);
                } else {
                    util.layerMsgError('获取数据失败');
                }
            }
        });
    }
</script>
<script type="text/javascript">

</script>
</body>
</html>